<template>
<div>

<el-container :style="{width : offsetwidth + 'px', height : offsetheight + 'px'}">
	<el-aside width="300px">
		<div class="custom-tree-node">
			<span>一级：{{top.name}}</span>
			<span>
				<el-button
			        type="text"
			        size="mini"
			        @click="show(top)">
			        查看
			    </el-button>

	            <el-button
			        type="text"
			        size="mini"
			        @click="edit(top)">
			        编辑
			    </el-button>

			    <el-button
			        type="text"
			        size="mini"
			        @click="add(top)">
			        添加下级
			    </el-button>
	        </span>
		</div>
		<el-tree :data="treedata" 
		:expand-on-click-node="false"
		class="tree"
		node-key="id"
		:props="props1"
		v-if="showTree"
		:indent="20"
		:style="{height : offsetheight + 'px'}"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
		        <span>{{ node.label }}</span>
		        <span>
		        	<el-button
				        type="text"
				        size="mini"
				        @click="show(data)">
				        查看
				    </el-button>

		            <el-button
				        type="text"
				        size="mini"
				        @click="edit(data)">
				        编辑
				    </el-button>

				    <el-button
				        type="text"
				        size="mini"
				        @click="add(data)">
				        添加下级
				    </el-button>

				    <el-button
				        type="text"
				        size="mini"
				        v-if="data.id != '143bf2ef757b4f3f94f5d3de0cef7b06'"
				        @click="del(data)"
				        >
				        删除
				    </el-button>
		        </span>
	        </span>

		</el-tree>
	</el-aside>
	<el-main style="padding:0;">
		<baidu-map :center="center" :ak="appkey"
		:zoom="zoom" 
		:style="{width : offsetwidth - 200 + 'px', height : offsetheight + 'px'}"
		>
		
			<bm-boundary 
			v-for="(item, index) in currentGride.citys" :key="index"
			:name="item" :strokeWeight="4" strokeColor="red"
			:fillOpacity="fillOpacity" fillColor=""
			></bm-boundary>
			
		</baidu-map>
	</el-main>
</el-container>


<el-dialog
  title="菜单信息"
  :visible.sync="grideDialogVisible"
  width="60%">
  
  	<el-form ref="form" :model="currentGride" label-width="180px">

	  <el-form-item label="网格名称："  >
	    <el-input v-model="currentGride.name" placeholder="请输入接口名称" style="width:400px;"></el-input>
	  </el-form-item>

	  <el-form-item label="地区：" >

	  	<el-tag
		  v-for="item, index in currentGride.citys"
		  :key="item.id"
		  type="danger"
		  class="mr10"
		  @close="handleClose(index)"
		  closable>
		  {{item}}
		</el-tag>

		<br>
		<el-cascader 
		style="width:400px; margin-top:10px; margin-right:10px;"
		:options="districtData"
		:props="props"
		filterable
		change-on-select
		v-model="selectedOptions"
		@change="handleChange">
		</el-cascader>

		<el-button type="primary" @click="addCity">添加</el-button>
	  </el-form-item>


	</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="grideDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {
	BmScale,
	BmBoundary,
} from 'vue-baidu-map'

import gride from '@/views/gride/create'

import District from 'ydui-district/dist/gov_province_city_area';


export default {
	
	name : 'baidumap',
	
	data () {
		return {
		  	appkey : 'WGQIqYYYMQT5PPGit818EarD8KFD4ikP',
		  	center: {lng: 0, lat: 0},
			//zoom: 9,
			zooms : [0, 8, 9, 11, 13, 14, 15],
			minZoom : 5,
			maxZoom : 15,
			fillOpacity : 0,


			offsetheight : document.documentElement.clientHeight - 60 - 20 - 20,    //
			offsetwidth : document.documentElement.clientWidth - 200 - 50,


			treedata : [],
			showTree : false,

			top : {},


			props1 : {
				label : 'name',
			},

			form : {}, 


			currentGride : {},

			grideDialogVisible : false,
			selectedOptions : [],
			districtData : District,

			props : {
				value : 'n',
				label : 'n',
				children : 'c',
			},

			what : '',
			center : '辽宁沈阳市',
		}
	},

	props : {

	},

	components : {
		BaiduMap,
		BmScale,
		BmBoundary,
		gride,
	},

	computed : {
		...mapGetters([
			
		]),

		zoom () {
			console.log('zoom');
			console.log(this.zooms[parseInt(this.currentGride.type)]);
			return this.zooms[parseInt(this.currentGride.type)];
		},
	},

	methods : {
		// handler ({BMap, map}) {
		// 	console.log(BMap, map)
		// 	// this.center.lng = 116.404
		// 	// this.center.lat = 39.915
		// 	this.zoom = 15
		// }

		init () {
			this.$http({
				fun : 'grideList',
				cb : res => {
					console.log(res);

					const result = this.$util.transData(res, 'id', 'parent_id', 'children');
					console.log(result);
					this.top = result[0];
					this.treedata = result[0].children;
					this.showTree = true;

				}
			});

			
		},

		show (item) {
			this.currentGride = {
				...item,
				citys : item.city_name.split(','),
			};
			this.center = this.currentGride.citys[0];
			console.log(this.center);
		},

		add (item) {
			this.currentGride = {
				parent_id : item.id,
				citys : [],
				type : parseInt(item.type) + 1,
			};

			this.what = 'add';
			this.grideDialogVisible = true;
			
		},
		edit (item) {
			
			this.currentGride = {
				...item,
				citys : item.city_name.split(','),
			};
			this.what = 'edit';
			this.center = this.currentGride.citys[0];
			this.grideDialogVisible = true;
			
		},
		del (item) {},

		save () {

			let para = {
				fun : 'createGride',
				name : this.currentGride.name,
				city_name : this.currentGride.citys.join(','),
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.grideDialogVisible = false;
					this.selectedOptions = [];
					this.init();
				}
			}

			if(this.what == 'add'){
				para['parent_id'] = this.currentGride.parent_id;
				para['type'] = this.currentGride.type;
			}else if(this.what == 'edit'){
				para['id'] = this.currentGride.id;
			}

			this.$http(para);
			
		},

		handleChange () {},

		handleClose (index) {
	    	this.currentGride.citys.splice(index, 1);
	    },

		addCity () {
			this.currentGride.citys.push(this.selectedOptions.join(''));
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.map {
  width: 100%;
  height: 600px;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
